<template>
  <div class="app-container">
    <div class="header_title_box">
      <h2>仓库管理</h2>
    </div>
    <div class="select_form_box">
      <!-- 搜索 -->
      <div class="filter-container">
        <el-input v-model="queryParam.name" size="middle" placeholder="仓库名称" class="input-with-select mr64" @keyup.enter.native="handleSearch" />
        <el-button size="middle" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="middle" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
      <!-- 操作按钮 -->
      <div class="operation_button_box">
        <el-button v-action="'warehouse@save'" size="middle" type="primary" icon="el-icon-circle-plus" @click="handleCreateSelf">新增仓库</el-button>
        <el-button v-action="'warehouse@changeActiveStatus'" :disabled="!selectedIds.length" size="middle" type="danger" @click="handleDisableOrEnable(0)">禁用</el-button>
        <el-button v-action="'warehouse@changeActiveStatus'" :disabled="!selectedIds.length" size="middle" type="primary" @click="handleDisableOrEnable(1)">启用</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table :data="data" border fit @selection-change="handleSelectMulti">
        <el-table-column type="selection" width="51" align="center" />
        <el-table-column label="操作" align="center" width="109" fixed>
          <template slot-scope="scope">
            <span v-if="getIsEdit(scope.row)" v-action="'warehouse@update'" class="edit_style" style="margin: 0;" @click="handleUpdateSelf(scope.row)">编辑</span>
            <span v-if="getIsEdit(scope.row)" v-action="'warehouse@delete'" class="delete_style" style="margin: 0;" @click="handleDelete(scope.row.id)">删除</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" prop="name" align="center" width="138" />
        <el-table-column label="仓库类型" prop="type_text" align="center" width="110" />
        <el-table-column label="上级仓库" prop="parent_warehouse" align="center" width="120" />
        <el-table-column label="仓库地址" align="center" width="221">
          <template slot-scope="scope">
            <span>{{ scope.row.street }} {{ scope.row.city }} {{ scope.row.state }} </span>
          </template>
        </el-table-column>
        <el-table-column label="仓库邮编" prop="zipcode" align="center" width="170" />
        <el-table-column label="状态" align="center" width="96">
          <template slot-scope="scope">
            <span :class="[ scope.row.is_active === 1 ? 'disable_style' : 'enable_style' ]" class="cursor_auto">{{ scope.row.is_active_text }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="created_by_name" align="center" width="112" />
        <el-table-column label="创建时间" prop="created_at" align="center" width="174" />
        <el-table-column label="修改人" prop="updated_by_name" align="center" width="112">
          <template slot-scope="scope">
            {{ scope.row.updated_by_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="updated_at" align="center" width="174">
          <template slot-scope="scope">
            {{ scope.row.updated_at || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 新增弹窗 -->
    <warehouse-dialog ref="warehouseDialog" @submit="addSubmitHandler" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import warehouseDialog from '../components/warehouseDialog.vue'
export default {
  name: 'Warehouse',
  components: {
    warehouseDialog
  },
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      componentName: 'Warehouse',
      url: '/warehouse' // 列表接口地址
    }
  },
  methods: {
    // 是否编辑
    getIsEdit(row) {
      return row.type !== 4 && row.is_active === 0
    },
    /**
     * 新增成功 handler
     * */
    addSubmitHandler() {
      const vm = this
      vm.getList()
    },
    /**
     * 打开编辑弹窗
     * */
    handleUpdateSelf(item) {
      const vm = this
      vm.$refs['warehouseDialog'].show(1, item)
    },
    /**
     * 打开新增弹窗
     * */
    handleCreateSelf() {
      const vm = this
      vm.$refs['warehouseDialog'].show(0)
    },
    /**
     * 批量禁用/批量启用
     * */
    handleDisableOrEnable(isActive) {
      const vm = this
      const ids = vm.data.filter(e => vm.selectedIds.includes(e.id)).filter(e => e.is_active === (isActive ? 0 : 1))
      if (ids.length !== vm.selectedIds.length) {
        return vm.$message.error(`所选数据必须都是${!isActive ? '启用' : '禁用'}状态`)
      }
      vm
        .$confirm(`确定${isActive ? '启用' : '禁用'}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          vm.$http
            .post('/warehouse/change-active-status', {
              ids: vm.selectedIds,
              is_active: isActive
            })
            .then(response => {
              vm.$message.success('操作成功')
              vm.getList()
            })
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
